<template>
  <div class="seriesPane">
    <div class="seriesInfo" v-for="(serie,index) in series" :key="index" v-on:mouseover="bookChange(index)">{{serie.name}}
      <div class="booksPane" v-show="index==num">
        <div class="bookInfo" v-for="(book,bookIndex) in serie.books">
          <div class="bookImg"><img :src="getImgUrl(book.imgsrc)"></div>
          <div class="bookName">{{book.name}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from "../../../../axios/api.js"
export default {
  name: "book",
  data() {
    return {
      series:[],
      num : 0
    }
  },
  methods:{
    setDataFromAxios:function (){
      api.setDataFromAxios("/series",null,"post" ).then(res=>{this.series=res.series})
   },
    getImgUrl:function(imgsrc){
      return  "../../../static/images/books/"+imgsrc;
    },
    bookChange:function(index){
      this.num = index;
    }
  },
  created:function() {
    this.setDataFromAxios();
  }
}
</script>

<style scoped lang="stylus">
  .seriesPane
    width 1000px
    height 50px
    margin 0 auto
    position relative
    .seriesInfo
      width 200px
      height 50px
      float left
      .booksPane
        width 1000px
        position absolute
        left 0
        .bookInfo
          margin 20px 0 0 10px
          float left
          .bookImg
            width 240px
            height 300px
            img
              width 240px
              height 300px
  .seriesInfo:after
    clear both
    display block
    content ""
</style>
